<template>
	<div>
		<p class="filter"></p>
		<div class="addBox"  style="">
			<h3 class="fixTitle"><span>选择商品</span>
				<p>
					<!-- <em style="cursor: pointer;" ><svg-icon icon-class="jian" class="font-size16"/></em><em style="cursor: pointer;"><svg-icon class="font-size16" icon-class="fullScreen" /></em> -->
          <em style="cursor: pointer;" @click="close"><svg-icon icon-class="cha" class="font-size16" /></em>
				</p>
			</h3>
			<div style="margin:40px 0 0;padding:0 20px;height:386px;overflow-y:scroll;">
				<el-table :data="goodsData" row-key="id" v-loading="listLoading" element-loading-text="加载中..." border fit highlight-current-row style="width: 100%;font-size: 12px;">
					<el-table-column align="center" label="选择商品">
						<template slot-scope="scope">
							<span><el-radio v-model="chooseValue" :label="scope.row.mgId">&nbsp;</el-radio></span>
						</template>
					</el-table-column>
					<el-table-column align="center" label="名称">
						<template slot-scope="scope">
							<img v-if="scope.row.avatar" :title="scope.row.name" :src="scope.row.avatar" class="width80 c-max-height60 c-verticalAlign-m"><br>
							<div :title="scope.row.name" class="c-text-ellipsis1 c-width90">
								{{scope.row.name}}
							</div>
						</template>
					</el-table-column>
					<el-table-column align="center" label="价格">
						<template slot-scope="scope">
							<span>{{scope.row.price}}元<br><s>{{scope.row.originalPrice}}元</s></span>
						</template>
					</el-table-column>
					<el-table-column align="center" label="库存">
						<template slot-scope="scope">
							<span>{{scope.row.stock}}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" label="已售数量">
						<template slot-scope="scope">
							<span>{{scope.row.sales}}</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
      <div class="block text-c">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.currentPage"
          :page-sizes="[10, 20, 30]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="listQuery.total">
        </el-pagination>
      </div>
      <div class="c-textAlign-c">
				<el-button type="primary" @click="save">确定</el-button>
				<el-button type="info" @click="close">取消</el-button>
			</div>
		</div>
	</div>
</template>
<script>
	import { bannerGoods } from '@/api/goods'
export default {
  data() {
    return {
      listQuery: {
        currentPage: 1,
        page: 1,
	        limit: 10,
	        total: null
      },
	      listLoading: false,
	      goodsData: [],
	      chooseValue: null
    }
	  },
	  mounted() {
	    this.getList()
	  },
  methods: {
    close() {
      this.$emit('hideGoods', false)
	    },
	    save() {
	      if (!this.chooseValue) {
	        this.$message({
	          type: 'warning',
	          message: '请选择商品！'
	        })
	        return
	      }
	      var goods = this.goodsData.find(item => item.mgId == this.chooseValue)
	      var data = {
	        mgId: this.chooseValue,
	        goodsName: goods.name,
	        avatar: goods.avatar
	      }
	      this.$emit('save', data)
	    },
    getList() {
      this.listLoading = true
      bannerGoods(this.listQuery).then(res => {
	        this.goodsData = res.data.data.data
	        this.listQuery.total = res.data.data.total
        this.listLoading = false
      }).catch(err => {
        console.log(err)
      })
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    }
  }
}
</script>
<style scoped>
	p,h3 {margin:0;padding:0}
  .number {
    display: inline-block;
    width: 32%;
    height: 37px;
    text-align: center;
    line-height: 37px;
  }
	h3 em{
		padding: 0 10px;
		font-style: normal;
	}
	h3 em:hover{
		color: #0E90D2;
	}
	.font-size16{
		font-size: 16px;
	}
	.fixTitle{
		font-weight: 500;
		font-size: 14px;
		height: 36px;
		background: #eee;
		border-bottom: 1px solid #ddd;
		position: fixed;
		width: 650px;
		line-height: 36px;
		padding: 0 10px;
		z-index: 98;
	}
	.addBox {
    position: relative;
		width: 650px;
		height: 550px;
		background: #fff;
		position: fixed;
		left: 30%;
		top: 10%;
		z-index: 101;
		font-size: 14px;
	}
	table{
		width: 100%;
		border: 1px solid #eee;
		border-spacing: 0;
		border-collapse: collapse;
		font-size: 12px;
	}
	td,th{
		border: 1px solid #eee;
		line-height: 36px;
		text-align: center;
	}
	.leftTd{
		width: 30%;
	}
	.rightTd{
		width: 70%;
	}
  /* .pagination {
    position: absolute;
    left: 15%;
    bottom: 10px;
  } */
</style>
